<template>
    <div>
        <div v-for="(item,key) in getCartList" :key="key" class="cartItem">
            <check-bottom 
            @click.native="clickCheck(key)" 
            :is-chooise = "item.checked"
            ></check-bottom>
            <div class="cartInfo">
                <img :src="item.img"/>
                <div class="shopInfo">
                    <div class="shopTitle" @click="gotoDetail(key)"><span>{{item.title}}</span></div>
                    <div class="shopDesc"><span>{{item.desc}}</span></div>
                    <div class="shopNum">
                        <span>￥{{item.price}}</span>
                        <div class="number-option">
                            <svg v-if="item.counter<=1"  class="icon" aria-hidden="true" 
                            @click="deleteCart(item)">
                                <use xlink:href="#icon-delete1"></use>
                            </svg>
                            <svg 
                            v-else
                            class="icon" aria-hidden="true" 
                            @click="substr(item)">
                                <use xlink:href="#icon-jianqu"></use>
                            </svg>
                            <span>{{item.counter}}</span>
                            <svg 
                            class="icon" aria-hidden="true"
                            @click="add(item)">
                                <use xlink:href="#icon-jia"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex"
    import checkBottom from 'components/content/checkBottom/checkBottom.vue'


    export default {
        computed:{
            ...mapGetters(["getCartList"])
        },
        components: {
            checkBottom
        },
        methods:{
            clickCheck(Index){
                this.$store.dispatch("editChecked",{Index})
            },
            gotoDetail(key){
                this.$router.push('/detail/'+this.getCartList[key].iid)
            },
            add(item){
                this.$store.dispatch("addCart",item)
            },
            substr(item){

                this.$store.dispatch("subCart",item)
            },
            deleteCart(item){
                this.$store.dispatch("deleteCart",item)
                .then(res=>{
                    this.$toast.show(res)
                })
            }
        }
    }
</script>

<style scoped>
    .cartItem{
        padding: 10px;
        border-bottom: 1px solid rgba(100, 100, 100, .1);
        display: flex;
        align-items: center;
    }
    .cartInfo{
        display: flex;
        align-items: center;
    }
    .cartInfo img{
        width: 90px;
        height: 90px;
        border-radius: 10px;
        margin-right: 10px;
    }
    
    .shopTitle{
        font-size: .88rem;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .shopDesc{
        width: 60%;
        background-color: #ecf0f1;
        border-radius: .42rem;
        padding:0 4px ;
        font-size: .84rem;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .shopNum{
        display: flex;
        justify-content:space-between;
    }
    .number-option span{
        display: inline-block;
        width: 40px;
        border-radius: 5px;
        border: 1px solid rgba(100, 100, 100, .1);
        padding:3px 0px;
        font-size: .8rem;
        text-align: center;
        margin: 0 5px;
    }
</style>